<template>
  <div v-show="state.option.show" :class="`title_main title_${state.option.type}`">
    <label>{{state.option.title}}</label>
    <div class="rounded-bg"/>
  </div>

</template>
<script setup lang="ts">
import {computed, defineProps, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts"
defineOptions({
  name: 'Title'
})
const props = defineProps(['option']);
const state = reactive({
  option:{
    height:20,
    width:20,
    left:0,
    top:0,
    title:'test',
    show:true,
    type:'left',
    bgheight:20,
    bgradius:3,

  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
const height=computed(()=>`${state.option.height}px`)
const width=computed(()=>`${(state.option.width/100)*state.window.width}px`)
const bgheight=computed(()=>`${(state.option.bgheight/100)*state.window.height}px`)
const bgradius=computed(()=>`${state.option.bgradius}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
})
</script>


<style scoped>
.title_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
  width: v-bind(width);
  height: v-bind(height);
  color: white;
  text-align: center;
  -webkit-box-shadow: rgba(0, 0, 0, 0.63) 0 0 10px;
  -moz-box-shadow: #07417a 0 0 10px;
}
.title_left{
  background-image: linear-gradient(to right, rgb(0, 0, 0) 0%, #07417a 25%,#07417a 75%, rgba(255, 255, 255, 0) 100%);
}
.title_right{
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #07417a 25%,#07417a 75%, rgb(0, 0, 0) 100%);
}
.rounded-bg{
  height: v-bind(bgheight);
  border-radius: v-bind(bgradius);
  background-color: rgba(0, 0, 0, 0.16);
  //background-color: white;
  margin-top: 8px;
}
</style>
